<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="password_top">
      <view class="headportrait" @click="changeAvatar(1)">
        <text>更换头像</text>
        <view style="display: flex; align-items: center">
          <image
            :src="user_img"
            style="
              width: 80rpx;
              height: 80rpx;
              margin: 0 20rpx;
              border-radius: 45rpx;
            "
            mode="scaleToFill"
            v-if="user_img != null"
          ></image>

          <image
            :src="userinfo.avatar"
            style="
              width: 80rpx;
              height: 80rpx;
              margin: 0 20rpx;
              border-radius: 45rpx;
            "
            mode="scaleToFill"
            v-else-if="userinfo && userinfo.avatar != null"
          ></image>
          <image
            src="/static/default-avatar.png"
            style="width: 80rpx; height: 80rpx; margin: 0 20rpx"
            mode="scaleToFill"
            v-else
          ></image>
          <!-- <image
            src="/static/jiantou.png"
            style="width: 20rpx; height: 20rpx"
            mode="scaleToFill"
          ></image> -->
        </view>
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>

      <view class="password">
        <input
          placeholder="输入昵称"
          v-model="nickname"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
    </view>

    <!-- <view class="password_center">
      <text>密码必须是6-16位</text>
      <text style="color: #fbda96; margin-top: 20rpx" @click=""
        >忘记密码？</text
      >
    </view> -->
    <view class="button" @click="Submit()"> 确定 </view>
  </view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
import { uploadImage } from "../../utils/upLoad.js";
export default {
  data() {
    return {
      nickname: "",
      newpassword: "",
      newpasswords: "",

      user_img: null,
      userinfo: null,
    };
  },
  onShow() {
    this.info();
  },
  methods: {
    async info() {
      let res = await api.info({
        loading: "加载中",
      });

      if (res.msg == "请先登录") {
        // uni.navigateTo({
        // 	url:'../signin/signin'
        // })
        return;
      }
      if (res.code == 0) {
        this.userinfo = res.data;
        uni.setStorageSync("userInfo", res.data);

        if (this.userinfo) {
          this.user_img = this.userinfo.avatar;
          this.nickname = this.userinfo.nickname;
        }
      }
    },

    async changeAvatar() {
      let res = await uploadImage();
      this.user_img = res[0];

      // if (res != "") {
      //   let resa = await api.store({
      //     query: {
      //       avatar: res[0],
      //       nickname: this.userinfo.nickname,
      //     },
      //     method: "post",
      //   });

      //   if (resa.code == 0) {
      //     this.user_img = res[0];
      //     let info = await api.info({});
      //     uni.setStorageSync("userInfo", info.data);
      //   }
      // }
    },

    async Submit() {
      if (this.nickname == "") {
        tip.defaults("请输入昵称");
        return;
      }

      let res = await api.store({
        query: {
          avatar: this.user_img,
          nickname: this.nickname,
        },
        method: "post",
      });

      if (res.code == 0) {
        tip.defaults("保存成功");

        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1500);
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.password_top {
  border: 2rpx solid #262934;
  // margin: 0 30rpx;
  background-color: $bg-color3;
  // border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.password {
  /* display: flex;
		justify-content: space-between;
		align-items: center; */
  color: #ffffff;
  margin: 20rpx 30rpx;
  padding: 5rpx 0;
  /* min-height: 60rpx; */
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.button {
  position: relative;
  top: 100rpx;
  margin: 30rpx;
  height: 90rpx;
  color: $text-color4;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
.headportrait {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 20rpx 30rpx;
  min-height: 60rpx;
}
</style>
